<template>
    <div 
    class="tag"
    :class="tagClass"
    @click="$emit('click', $event)"
    >
        <slot></slot>

        <div 
            v-if="closeable"
            class="btn-close"
            @click="$emit('close')"
        ></div>
    </div>
</template>

<script>
export default {
    props: {
        active: {
            type: [Boolean, Number],
            default: false,
        },
        closeable: {
            type: Boolean,
            default: false,
        },
        size: {
            type: String,
            default: 'normal',
        },
        round: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        tagClass() {
            var res = [];

            if (this.active) {
                res.push('active');
            }

            if (this.round) {
                res.push('round');
            }

            res.push(this.size);

            return res.join(' ');
        },
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .tag{
        display: inline-block;
        line-height: 1em;
        font-size: 14px;
        padding: 14px 21px;
        color: #666;
        background-color: #f4f4f4;
        border-radius: 3px;
        cursor: pointer;
        transition: all .1s;
        margin-right: 16px;

        &.normal{
            padding: 14px 21px;

            &.round{
                border-radius: 16px;
            }
        }
        &.small{
            padding: 8px 13px;

            &.round{
                border-radius: 15px;
            }
        }

        &:hover, &.active{
            background-color: $primaryColor;
            color: white;
        }

        &.active{
            .btn-close{
                &:before, &:after{
                    background: white;
                }
            }
        }

        .btn-close{
            width: 14px;
            height: 14px;
            border-radius: 50%;
            position: relative;
            float: right;
            margin-left: 10px;

            &:before, &:after{
                content: '';
                display: bolck;
                width: 1px;
                height: 8px;
                background: #999;
                position: absolute;
                left: 50%;
                top: 50%;
                border-radius: 1px;
            }

            &:before {
                transform: translate(-50%, -50%) rotate(-45deg);
            }

            &:after{
                transform: translate(-50%, -50%) rotate(45deg);
            }

            &:hover{
                background: white;

                &:before, &:after{
                    background: #999;
                }
            }
        }
    }
</style>